<template>
  <div class="panel paddingLeft"
       ref="echartsinit"></div>
</template>

<script>
import Bus from "../utils/bus.js"
export default {
  data () {
    return {
      regionData: [
        {
          name: '江宁',
          chartData: [
            {
              // 面板显示层数
              floor: 'U1',
              // 面板显示的深度
              depth: '5m',
              // 左边进度条宽度
              leftData: -110,
              // 右边进度条宽度
              rightData: 110,
              // 该层总面积百分比
              persent: '99%',
              // 实际面积
              square: '24.94w'

            },
            {
              // 面板显示层数
              floor: 'U2',
              // 面板显示的深度
              depth: 10,
              // 左边进度条宽度
              leftData: -90,
              // 右边进度条宽度
              rightData: 90,
              // 该层总面积百分比
              persent: 30,
              // 实际面积
              square: 20.94
            },
            {
              // 面板显示层数
              floor: 'U3',
              // 面板显示的深度
              depth: 10,
              // 左边进度条宽度
              leftData: -90,
              // 右边进度条宽度
              rightData: 70,
              // 该层总面积百分比
              persent: 20,
              // 实际面积
              square: 18.94
            }

          ]
        }
      ]
    }
  },
  mounted () {
    this.echartsinit(this.regionData[0]);
  },
  methods: {
    echartsinit (e) {
      var myChart = this.$echarts.init(this.$refs["echartsinit"]);
      // 绘制图表
      console.log(e)
      myChart.setOption({
        grid: {
          // top:'40%',
          left: "25%",
          right: "25%",
          bottom: "2%"
        },
        xAxis: [
          {
            type: "value",
            show: false,
            //横坐标的负半轴的  "坐标轴" 上显示是正数
            max: 100, //最大刻度
            min: -100, //最小刻度
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            //中
            type: "category",
            position: "left", //纵向坐标显示位置 可选为：left | right
            axisLine: {
              lineStyle: {
                color: "#00bbd5",
                type: 'dashed'
              }
            }
          },
          {
            //右右
            name: "比例",
            nameTextStyle: {
              padding: [0, 0, 0, 40],
              color: ['#5dbff0', 'red', 'green', 'blue']
            },
            type: "category",
            position: "right", //纵向坐标显示位置 可选为：left | right
            offset: 55,
            axisLabel: {
              color: "#66e5da"
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false //网格线不显示
            },
            data: ["25%", "34%", "38%", "45%", e.chartData[0].persent + '%'],

          },
          {
            //右
            name: "面积/平方米",
            nameTextStyle: {
              padding: [0, 0, 0, 35],
              color: '#5dbff0'
            },
            type: "category",
            position: "right", //纵向坐标显示位置 可选为：left | right
            offset: 0,
            axisLabel: {
              color: "#f3f0d8"
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false //网格线不显示
            },

            data: [

              "4.94w",
              "8.94w",
              "13.94w",
              "17.94w",
              e.chartData[0].square
            ]
          },
          {
            //左
            name: "深度（距地面）",
            nameTextStyle: {
              padding: [0, 0, 0, 25],
              color: '#5dbff0'
            },
            type: "category",
            position: "left", //纵向坐标显示位置 可选为：left | right
            offset: 0,
            axisLabel: {
              color: "#fffaa6"
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false //网格线不显示
            },
            data: ["30m", "25m", "20m", "15m", "10m", "5m"]
          },
          {
            //左左
            name: "层数",
            nameTextStyle: {
              padding: [0, 30, 0, 0],
              color: '#5dbff0'
            },
            type: "category", //对应下面data的值
            position: "left", //纵向坐标显示位置 可选为：left | right
            offset: 55, //偏移量
            axisLabel: {
              color: "#f3f0d8" //坐标刻度对应的字体
            },
            axisLine: {
              show: false //坐标轴
            },
            axisTick: {
              show: false //坐标刻度
            },
            splitLine: {
              show: false //网格线不显示
            },
            data: ["U5", "U4", "U3", "U2", "U1"]
          }
        ],


        // color: ["#008ef7", "#00eab2"],
        series: [
          {
            type: "bar",
            stack: "堆叠显示",
            data: [30, 50, 70, 90, 110],
            barWidth: 20,
            barGap: '10%',
            barCategoryGap: '200%',
            color: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#00bad6' // 0% 处的颜色
              }, {
                offset: 1, color: '#00eab2' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            },

          },
          {
            type: "bar",
            stack: "堆叠显示",
            color: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#00bad6' // 0% 处的颜色
              }, {
                offset: 1, color: '#008ef6' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            },
            data: [-30, -50, -70, -90, -110],

          }
        ]
      });
      myChart.on("click", function (params) {
        // console.log(params.seriesIndex)
        Bus.$emit('singleFloor', params.value)
      });
    }
  }
};
</script>